<!--文件上传组件-->
<template>
  <div class="upload-img" @click="choose">
    <div class="up-img-box">
      <img src="../../common/img/add.png" v-if="!tempImg && !originValue">
      <img :src="tempImg || originValue" v-else>
    </div>
    <transition name="fade">
      <div class="mask" v-if="loading || tempImg || value" @click.prevent.stop>
        <mt-progress :value="progress" :bar-height="5" class="progress" v-if="loading"></mt-progress>
        <span class="tip" v-if="loading">上传中...</span>
        <mt-button type="danger" size="small" v-else @click="del">删除</mt-button>
      </div>
    </transition>
    <input
      type="file"
      class="file"
      ref="file"
      @change="upload($event)"
      :accept="accept"
      v-if="fileInput && !loading && !tempImg && !value">
  </div>
</template>
<script>
  import {upload, delNull} from '../../common/js/util'

  export default {
    props: {
      accept: {type: String, default: 'image/*'},
      value: {type: null, default: ''},
      type: {type: null, default: ''},
      fileName: {type: String, default: ''},
      required: {type: null, default: ''}
    },
    name: 'upload-image',
    computed: {
      originValue: {
        get() {
          if (typeof this.value === 'string') {
            return this.value
          } else {
            return this.$getImg(this.value.filePath)
          }
        }
      }
    },
    data() {
      return {
        tempImg: '',
        loading: false,
        progress: 0,
        fileInput: true
      }
    },
    methods: {
      choose() {
        // this.$refs.file.click()
      },
      reset() {
        this.fileInput = false
        setTimeout(() => {
          this.fileInput = true
        }, 50)
      },
      upload(e) {
        /*
        * moduleType: 上传文件类型
        * 党员: 19
        * 继续教育: 20
        * 档案: 21
        * 职称: 22
        * 户口: 23
        * 用户认证: 24
        * 社会保险: 25
        * */
        const file = e.target.files[0]
        if (file) {
          if (this.tempImg) {
            URL.revokeObjectURL(this.tempImg)
          }
          this.tempImg = URL.createObjectURL(file)
          this.loading = true
          this.progress = 0
          const form = new FormData()
          form.append('file', file)
          upload('/admin/person/sapi/sys/file/upload/callback', form, {
            fileName: encodeURIComponent(this.fileName),
            moduleType: this.type
          }, loading => { this.loading = loading }, progress => {
            this.progress = progress
          }).then(res => {
            delNull(res.data)
            this.$emit('input', res.data)
            this.reset()
          }).catch(() => {
            this.tempImg = ''
            this.reset()
          })
        }
      },
      del() {
        if (this.tempImg) {
          URL.revokeObjectURL(this.tempImg)
          this.tempImg = ''
        }
        this.$emit('input', '', this.value)
      },
      validValue() {
        if (this.required && !this.value) {
          this.$message.toast(this.required)
          return new Error(this.required)
        } else {
          return true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .upload-img{
    position: relative;
    display: block;
    .up-img-box{
      padding: 35% 0;
      overflow: hidden;
      width: 100%;
      height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    img{
      width: 100%;
      display: block;
    }
    .file{
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
    .mask{
      background: rgba(0,0,0,.5);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .progress{
        width: 80%;
        height: .3rem;
      }
      .tip{
        color: #fff;
      }
    }
  }
</style>
